<template>
  <div class="dragger-view" ref="view" :style="position" v-if="x > 0 && y > 0">
    <div
      @mousedown="mousedown"
      @mousemove="mousemove"
      @mouseup="mouseup"
      @mouseleave="mousemove"
    >
      <slot name="header" />
    </div>
    <slot name="body" />
  </div>
</template>
<script>
export default {
  name: "DraggerView",
  props: ["left", "top"],
  data() {
    return {
      show: false, //是否显示
      x: 0, //left:x
      y: 0, //top:y
      leftOffset: 0, //鼠标距离移动窗口左侧偏移量
      topOffset: 0, //鼠标距离移动窗口顶部偏移量
      isMove: false, //是否移动标识
    };
  },
  mounted() {
    this.x = this.left;
    this.y = this.top;
  },
  computed: {
    //top与left加上px
    position() {
      return `top:${this.y}px;left:${this.x}px;`;
    },
  },
  methods: {
    mousedown(event) {
      //鼠标按下事件
      this.leftOffset = event.offsetX;
      this.topOffset = event.offsetY;
      this.isMove = true;
    },
    //鼠标移动
    mousemove(event) {
      if (!this.isMove) {
        return;
      }
      this.x = event.clientX - this.leftOffset;
      this.y = event.clientY - this.topOffset;
    },
    //鼠标抬起
    mouseup() {
      this.isMove = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.dragger-view {
  position: fixed;
  cursor: move;
}
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
.content {
  padding: 10px;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>
